<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>

    /* 
        这一节算是侧轴对齐方式的补充
        上一节通过align-items实现了子盒子在主轴排列的情况下,增加了侧轴的排列方式.它有居中,上,下,压缩属性.
        假设我有多行子元素,我想上面一行贴着父盒子的上沿,下面一行贴着父盒子的下沿使用align-items做不到但是align-content可以

        注意使用的时候要注意要在多行的情况使用

        主要看在多行的情况下的布局情况,使用时候一定要主要有换行标志flex-wrap: wrap;


    */

    .box {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        height: 300px;
        border: 10px dashed black;
        margin: 0 auto;

        /* 弹性盒子沿侧轴上沿对齐 */
        /*align-content: flex-start;*/

        /* 弹性盒子沿侧轴下沿对齐 */
        /*align-content: flex-end;*/

        /* 弹性盒子沿侧轴居中对齐 */
        /*align-content: center;*/

        /* 弹性盒子沿侧轴均匀排列,空白间距均分在弹性盒子两侧 */
        /*align-content: space-around;*/

        /* 弹性盒子沿侧轴均匀排列,弹性盒子与容器之间的间距相等 */
        /*align-content: space-evenly;*/

        /* 弹性盒子沿侧轴均匀排列,空白间距均分在盒子之间 */
        align-content: space-between;
    }


    .box div {
        height: 100px;
        width: 300px;
        background-color: pink;
    }


</style>

<body>
<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>3</div>
    <div>3</div>
    <div>3</div>
    <div>3</div>
    <div>3</div>
    <div>3</div>
    <div>3</div>
    <div>3</div>
    <div>3</div>
</div>
</body>

</html>